<!--
 * @Description: 
 * @Date: 2023-02-20 18:46:35
 * @LastEditors: czp
 * @LastEditTime: 2023-05-06 10:55:20
-->
<template>
	<div v-if="showFriendLinks" class="friend-chain">
		<span>相关链接：</span>
		<a v-for="(item, index) in list" :key="index" :href="item.url" target="_blank">
			<el-image fit="contain" :src="item.img" />
		</a>
		<span class="build-time">build: {{ Version }}</span>
	</div>

	<div class="footer" v-if="showFooter">
		<div class="info-box">
			<div class="info-item">
				<span class="info-title">联系我们</span>
				<span>电话：023-77820901 </span>
				<span>地址：重庆市武隆区仙女山街道荆竹村</span>
				<span>Copyright&copy;2023：重庆市云上荆竹电子商务有限公司</span>
				<!-- <span>build：{{ Version }} </span> -->
			</div>

			<div class="page-link">
				<span v-for="(item, index) in menuList" :key="index">{{ item.name }}</span>
			</div>

			<div class="policy">
				<span>信息安全政策</span>
				<span>隐私政策</span>
				<span>联系我们</span>
				<!-- <span>您是本站第<i>123654789</i>位访客</span> -->
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="BaseFooter">
import { useBaseStore } from "@/store/base";
const { cosPrefix, menuList } = useBaseStore();
const Version = ENV_BUILD_TIME;

const list = [
	{ img: cosPrefix + "footer/5.png", url: "http://www.cqwulong.cn/" },
	{ img: cosPrefix + "footer/1.png", url: "https://www.ctrip.com/?sid=155952&allianceid=4897&ouid=index" },
	{ img: cosPrefix + "footer/2.png", url: "https://www.tuniu.com/" },
	{ img: cosPrefix + "footer/3.png", url: "https://www.qunar.com/" },
	{ img: cosPrefix + "footer/4.png", url: "https://www.cqnews.net/" }
];
withDefaults(defineProps<{ showFriendLinks?: boolean; showFooter?: boolean }>(), {
	showFriendLinks: false,
	showFooter: true
});
</script>
<style lang="scss" scoped>
.friend-chain {
	position: relative;
	z-index: 9;
	display: flex;
	align-items: center;
	padding: 10px 50px;
	font-size: 16px;
	color: rgb(16 16 16 / 100%);
	.el-image {
		width: 100px;
		height: 24px;
		margin-left: 20px;
		vertical-align: middle;
	}
}
.footer {
	height: 280px;
	padding: 68px 320px;
	color: #ffffff;
	background-image: url("https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/footer/footer.png");
	background-position: center;
	background-size: 100% 100%;
	.info-box {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		.info-item {
			display: flex;
			flex-direction: column;
			.info-title {
				font-size: 24px;
				color: #ff8200;
			}
			span {
				padding-bottom: 10px;
			}
		}
		.page-link {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 20px;
			border-left: 1px solid #ffffff;
			p {
				padding: 0;
				padding-bottom: 10px;
				margin: 0;
				.margin-style {
					margin-right: 40px;
				}
				&:last-child {
					padding-bottom: 0;
				}
			}
		}
		.policy {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 20px;
			border-left: 1px solid #ffffff;
			span {
				padding-bottom: 10px;
				&:last-child {
					padding-bottom: 0;
				}
				i {
					color: #ff8200;
				}
			}
		}
	}
}
.build-time {
	position: absolute;
	right: 40px;
	font-size: 12px;
	color: #999999;
}

@media all and (max-width: 750px) {
	.friend-chain {
		padding: 10px;
		.el-image {
			width: 50px;
		}
	}
	.footer {
		height: auto;
		padding: 14px;
		.info-box {
			font-size: 10px;
			.info-title {
				font-size: 16px;
			}
		}
	}
}
</style>
